<template>
    <div class="app-container">
        <!-- 查询条件 -->
        <el-card>
            <el-form v-show="state.showSearch" ref="queryRef" :inline="true" :model="state.queryParams"
                label-width="68px">

                <el-form-item label="文章编号" prop="essayid">
                    <el-input v-model="state.queryParams.essayid" placeholder="请输入文章编号" clearable
                        style="width: 240px" />
                </el-form-item>

                <el-form-item label="文章名称" prop="title">
                    <el-input v-model="state.queryParams.title" placeholder="请输入文章名称" clearable style="width: 240px" />
                </el-form-item>

                <el-form-item label="创建时间" style="width: 308px">
                    <el-date-picker v-model="state.dateRange" value-format="YYYY-MM-DD" type="daterange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery(proxy)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 制作表格 -->
        <el-card style="margin-top: 20px;">
            <el-row :gutter="10" class="mb20">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="Plus" @click="addOrUpdateHandle(undefined)">新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" plain icon="Delete" :disabled="state.multiple"
                        @click="deleteBatchHandle(state.ids)">删除</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" plain icon="Edit" :disabled="state.multiple"
                        @click="addOrUpdateHandle(state.ids)">修改</el-button>
                </el-col>
                <right-toolbar v-model:showSearch="state.showSearch" @queryTable="getDataList"></right-toolbar>
            </el-row>
            <el-table v-loading="state.loading" :data="state.rows" style="width: 100%"
                @selectionChange="selectionChangeHandle">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="文章编号" align="center" prop="essayid" :show-overflow-tooltip="true" />
                <el-table-column label="文章名称" align="center" prop="title" :show-overflow-tooltip="true" />
                <el-table-column label="文章内容" align="center" prop="brief" :show-overflow-tooltip="true" />
                <el-table-column label="文章图片地址" align="center" prop="imageUrl" :show-overflow-tooltip="true" />
                <el-table-column label="点赞数" align="center" prop="dianzhan" :show-overflow-tooltip="true" />
                <el-table-column label="评论数" align="center" prop="comments" :show-overflow-tooltip="true" />
                <el-table-column label="发表人id" align="center" prop="userid" :show-overflow-tooltip="true" />
                <el-table-column label="发表人地址" align="center" prop="useraddress" :show-overflow-tooltip="true" />
                <el-table-column label="发表时间" align="center" prop="createTime" width="180">
                    <template #default="state">
                        <span>{{ parseTime(state.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                    <template #default="state">
                        <el-tooltip content="修改" placement="top">
                            <el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit"
                                @click="addOrUpdateHandle(state.row.essayid)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button v-hasPermi="['system:user:remove']" link type="danger" icon="Delete"
                                @click="deleteHandle(state.row.essayid)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="state.total > 0" v-model:page="state.pageNum" v-model:limit="state.pageSize"
                :total="state.total" @pagination="getDataList" />
        </el-card>

        <!-- 引用新增或修改的界面 -->
        <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>

    </div>
</template>

<script setup name="find-essay" lang="ts">
import { useRoute } from 'vue-router';
import {ref, reactive, getCurrentInstance, ComponentInternalInstance } from 'vue'
import { IHooksOptions } from '@/hooks/hooksinterface'
import { useCrud } from '@/hooks/hooksservice'
import { findEssayList, deleteEssay } from '@/api/app/find/essay'
//引用新增修改组件页
import AddOrUpdate from './add-and-edit.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const state: IHooksOptions = reactive({
    primaryKey: 'essayid',
    pageNum: 1,
    pageSize: 10,
    queryParams: {
        essayid: undefined,
        essayName: '',
    },
    queryApi: findEssayList,
    deleteApi: deleteEssay
})
const { getDataList, selectionChangeHandle, sortChangeHandle, resetQuery, deleteHandle, deleteBatchHandle } = useCrud(state)


// 调用新增或修改页面的方法
const addOrUpdateRef = ref();
//新增或修改的时候传递id
const addOrUpdateHandle = (id?: number| undefined ) => {
    //调用它里面的init方法
    addOrUpdateRef.value.init(id);
};

</script>
